<script setup>
  import {computed} from "vue";

  const props = defineProps({
    houseData: {
      type: Object,
      default: () => ({})
    }
  })

  //背景图片
  const imgBack = computed(() => `url(${props.houseData.image.url})`)
  //评分
  const score = computed(() => Number(props.houseData.commentScore))
  //价格
  const price = computed(() => `￥${props.houseData.finalPrice}`)
</script>

<template>
  <div class="homeResourcesItemFull homeItem" :style="{backgroundImage:imgBack}">
    <div class="info">
      <div class="summary">{{ houseData.summaryText }}</div>
      <div class="name">{{ houseData.houseName }}</div>
      <div class="bottom">
        <div class="score">
          <van-rate :modelValue="score" :size="12" readonly allow-half/>
        </div>
        <div class="price">{{ price }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .homeResourcesItemFull {
    background-size: cover;
    position: relative;

    --van-rate-icon-full-color: #fff;

    .info {
      position: absolute;
      bottom: 0;
      color: white;
      left: 0;
      padding: 6px 6px 0;

      div {
        margin: 3px 0;
        display: flex;
      }

      .summary {
        font-size: 12px;
      }

      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; // 控制多行的行数
        -webkit-box-orient: vertical;
      }

      .bottom {
        align-items: center;
        justify-content: space-between;
      }
    }
  }
</style>